<template>
  <view class="pagecon">
    <head-box></head-box>
    <view class="banner">
      <image class="_img" src="../../static/img/wycy_banner.png" mode="widthFix"></image>
    </view>
    <view class="box_mian">
      <view class="quan">
        <view class="quntuanListPage-main-header">
          <div class="quntuanListPage-main-title">我要参与</div>
        </view>
        <view class="item bj2" @tap="handleLink('/pages/advice/advice?id=3')">
          <view class="box c3">
            <view class="h2">我有金点子</view>
            <view class="p1 mt">群策群力,邀您来出谋划策！</view>
            <image src="../../static/img/wycy_ico3.png" mode=""></image>
          </view>
        </view>
        <view class="item bj1" @tap="handleLink('/pages/advice/advice?id=2')">
          <view class="box c2">
            <view class="h2">我来奉献</view>
            <view class="p1 mt">一起做公益，大家来共享吧！</view>
            <image src="../../static/img/wycy_ico1.png" mode=""></image>
          </view>
        </view>
        <view class="item" @tap="handleLink('/pages/addactivity/addactivity')">
          <view class="box c1">
            <view class="h2">我有活动要发布</view>
            <view class="p1 mt">社会组织,爱心团队都来发布活动吧！</view>
            <image src="../../static/img/wycy_ico2.png" mode=""></image>
          </view>
        </view>
      </view>
    </view>
    <view class="box1">
      <view class="item">
        <view @tap="tabClick(0)" :class="[tabCurrentIndex == 0 ? 'selected' : '']">奉献志愿者</view>
      </view>
      <view class="item">
        <view @tap="tabClick(1)" :class="[tabCurrentIndex == 1 ? 'selected' : '']">金点子集合</view>
      </view>
    </view>
    <view class="tab-botton">
      <swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
        <swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
          <scroll-view
            class="list-scroll-content"
            scroll-y="true"
            style="height: calc(100vh - 330rpx)"
            @scrolltolower="loadData"
          >
            <!-- 空白页 -->
            <empty-view
              slot="empty"
              v-if="tabItem.loaded === true && tabItem.orderList.length === 0"
            ></empty-view>
            <!-- 列表 -->
            <view class="box2" v-for="(item, index) in tabItem.orderList" :key="index">
              <view class="item_box">
                <view class="item1">
                  <image
                    :src="item.userPic == '' ? '../../static/img/logob.png' : item.userPic"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="item">
                  <view class="item_b">
                    {{ GetShortName(item.userNickname) }}
                  </view>
                  <view class="item_c">
                    {{ item.adviseContent }}
                  </view>
                  <view class="item_c" v-if="!!item.adviseResult && tabCurrentIndex == 1">
                    <text class="hf">回复</text> {{ item.adviseResult }}
                  </view>
                  <view class="item_d">
                    <view class="time">{{ item.createTime }}</view>
                    <view class="dz" @tap="addZan(item)">
                      <image
                        v-if="item.userDzTimes == 0"
                        src="../../static/img/dz.png"
                        mode="aspectFill"
                      ></image>
                      <image
                        v-if="item.userDzTimes > 0"
                        src="../../static/img/dzon.png"
                        mode="aspectFill"
                      ></image>
                      <text>{{ item.dzTimes }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <uni-load-more :status="tabItem.loadingType"></uni-load-more>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <tabs-box></tabs-box>
  </view>
</template>

<script>
  import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
  import {
    gpUseradviseAlllist,
    addUserUseradviseOperateTimes,
    getUseradviseOperateTimes,
  } from '@/common/request.js'
  import { DatetimeToShortTime } from '@/common/functions.js'
  export default {
    data() {
      return {
        tabCurrentIndex: 0,
        isChanged: false,
        sum: 0,
        total: 0,
        navList: [
          {
            useradviseType: 5,
            text: '奉献志愿者',
            loadingType: 'more',
            page: 0,
            orderList: [],
          },
          {
            useradviseType: 4,
            text: '金点子集合',
            loadingType: 'more',
            page: 0,
            orderList: [],
          },
        ],
        selected: true,
      }
    },
    onLoad() {
      this.loadData()
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    components: {
      uniLoadMore,
    },
    methods: {
      //获取订单列表
      async loadData(source) {
        //这里是将订单挂载到tab列表下
        const index = this.tabCurrentIndex
        const navItem = this.navList[index]
        const useradviseType = navItem.useradviseType
        if (source === 'tabChange' && navItem.loaded === true) {
          //tab切换只有第一次需要加载数据
          return
        }
        if (navItem.loadingType === 'loading' || navItem.loadingType === 'noMore') {
          //防止重复加载
          return
        }
        navItem.page++
        const limit = 20
        navItem.loadingType = 'loading'
        let params = {
          useradviseType: useradviseType,
          adviseStatus: '3',
          column: 'createTime',
          order: 'desc',
        }
        gpUseradviseAlllist(limit, navItem.page, params).then((res) => {
          if (res.success) {
            const list = []
            res.result.records.forEach((ele) => {
              var n = {
                id: ele.id,
                adviseContent: ele.adviseContent,
                adviseResult: ele.adviseResult,
                userPic: ele.userPic,
                userNickname: ele.userNickname,
                createTime: DatetimeToShortTime(ele.createTime),
                userName: ele.userName,
                dzTimes: 0,
                userDzTimes: 0,
              }
              params = { useradviseId: ele.id }
              getUseradviseOperateTimes(params).then((res) => {
                if (res.success) {
                  const dzTimes = res.result.dzTimes
                  const userDzTimes = res.result.userDzTimes
                  n.dzTimes = dzTimes
                  n.userDzTimes = userDzTimes
                }
              })
              list.push(n)
            })
            setTimeout(() => {
              navItem.orderList = navItem.orderList.concat(list)
              navItem.loadingType = 'more'
            }, 500)
          }
          if (res.result.records.length < limit) {
            //没有数据了
            //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
            this.$set(navItem, 'loaded', true)
            //判断是否还有数据， 有改为 more， 没有改为noMore
            navItem.loadingType = 'noMore'
          }
        })
      },
      //swiper 切换
      changeTab(e) {
        this.tabCurrentIndex = e.target.current
        this.loadData('tabChange')
      },
      //顶部tab点击
      tabClick(index) {
        this.tabCurrentIndex = index
      },
      //所有数据重新刷新
      refreshList() {
        this.isChanged = true
        this.navList.forEach((nav) => {
          nav.page = 0
          nav.loadingType = 'more'
          nav.orderList = []
        })
        //重新加载数据
        this.loadData()
      },
      changetab(e) {
        this.selected = e
      },
      GetShortName(username) {
        if (username == undefined) return ''
        if (username.length > 7) return username.substring(0, 7) + '****'
        else return username
      },
      handleLink(link) {
        uni.navigateTo({
          url: link,
        })
      },
      addZan(item) {
        if (!uni.getStorageSync('token')) {
          this.$api.msg('登陆后才能点赞')
          return
        }
        const params = { category: '2', useradviseId: item.id }
        addUserUseradviseOperateTimes(params).then((res) => {
          if (res.success) {
            item.dzTimes += 1
            item.userDzTimes = 1
            this.$api.msg('点赞成功')
          } else this.$api.msg(res.message)
        })
      },
    },
  }
</script>

<style lang="scss">
  .pagecon {
    background-color: #ffffff;
    min-height: 100vh;
  }
  .banner {
    width: 100%;
    padding: 30rpx 30rpx 0 30rpx;
    image {
      border-radius: 10rpx;
      width: 100%;
    }
  }

  .box_mian {
    padding: 30rpx 30rpx 0 30rpx;
  }
  .quntuanListPage-main-title {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
    border-left: 6rpx solid #0071fc;
    padding-left: 20rpx;
  }
  .quan {
    .item {
      background-color: #dcc4fe;
      margin: 30rpx 0;
      border-radius: 10rpx;
      padding: 30rpx;
      flex: 1 1 auto;
      position: relative;
      .h2 {
        font-size: 36rpx;
      }
      .p1 {
        margin-top: 20rpx;
        font-size: 26rpx;
      }
      image {
        position: absolute;
        right: 40rpx;
        bottom: 20rpx;
        width: 120rpx;
        height: 120rpx;
      }
    }
  }
  .bj1 {
    background-color: #e9d9ff;
  }
  .bj2 {
    background-color: #f5eefe;
  }
  .swiper-box {
    height: calc(100vh - 330rpx);
  }
  .list-scroll-content {
    height: 100%;
  }

  .box1 {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f3f3f3;
    height: 130rpx;
    .item {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 100rpx;
      background-color: #ffffff;
      color: #bcbcbc;
      padding: 20rpx 30rpx;
    }
    .selected {
      background-color: #884dde;
      display: flex;
      color: #ffffff;
      width: 100%;
      height: 100%;
      border-radius: 30rpx;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  }
  .boxfb {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 1px solid #cccccc;
    background-color: #fbfbfb;
    padding: 0 30rpx;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 100rpx;
      color: #bcbcbc;
    }
    .selected {
      color: #4184ff;
      font-weight: bold;
    }
  }
  .box2 {
    margin: 0 30rpx;
    padding: 0 30rpx;
    border-bottom: 1px solid #bbbbbb;
    .item_box {
      display: flex;
      flex-direction: row;
      .item1 {
        padding: 30rpx 30rpx 0 0;
        width: 110rpx;
        image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
      }
      .item {
        width: calc(100% - 110rpx);
        padding: 30rpx 0;
        .item_b {
          text-align: left;
          font-size: 30rpx;
          font-weight: bold;
        }
        .item_c {
          font-size: 24rpx;
          line-height: 40rpx;
          margin-top: 20rpx;
          /*color: #888888;
					text-indent: 2em;*/
          .hf {
            background-color: #884dde;
            padding: 0rpx 20rpx;
            margin-right: 20rpx;
            color: #ffffff;
            border-radius: 20rpx;
          }
        }
        .item_d {
          display: flex;
          flex-direction: row;
          .time {
            width: 50%;
            color: #bbbbbb;
            font-size: 24rpx;
            margin-top: 20rpx;
            line-height: 40rpx;
          }
          .dz {
            margin-top: 20rpx;
            width: 50%;
            text-align: right;
            image {
              width: 40rpx;
              height: 40rpx;
              vertical-align: middle;
              margin-right: 10rpx;
            }
            text {
              color: #888888;
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }
</style>
